<template>
  <div class="adminHandle" >
    <div style="margin-top:30px">
      <h2>图书信息管理</h2>
      <el-table
        :data="tableDataBookTimely"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="图书id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="库存">
                <span>{{ props.row.stock }}</span>
              </el-form-item>
              <el-form-item label="图书标准编号">
                <span v-show="!isEdit">{{ props.row.isbn }}</span>
                <el-input v-model="props.row.isbn" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="书名">
                <span v-show="!isEdit">{{ props.row.name }}</span>
                <el-input v-model="props.row.name" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <span v-show="!isEdit">{{ props.row.writer }}</span>
                <el-input v-model="props.row.writer" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="出版社">
                <span v-show="!isEdit">{{ props.row.publisher }}</span>
                <el-input v-model="props.row.publisher" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="出版时间">
                <span v-show="!isEdit">{{ props.row.publishDate }}</span>
                <el-input suffix-icon="el-icon-date" placeholder="YYYY-MM-DD" v-model="props.row.publishDate" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="学科类型">
                <span v-show="!isEdit">{{ props.row.subject }}</span>
                <el-input v-model="props.row.subject" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="warning" @click="toEdit">编辑</el-button>
                <el-button type="primary" v-show="isEdit" @click="quitEdit(props.row)">确定</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="图书名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="作者"
          prop="writer">
        </el-table-column>
        <el-table-column
          label="出版社"
          prop="publisher">
        </el-table-column>
        <el-table-column
          label="学科"
          prop="subject">
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="addBooks" class="addButton">增加图书信息</el-button>

      <div class="formBox">
        <el-form ref="form" :model="addBook" label-width="120px">
          <el-form-item label="图书标准编号">
            <el-input v-model="addBook.isbn"></el-input>
          </el-form-item>
          <el-form-item label="图书名称">
            <el-input v-model="addBook.name"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="addBook.stock"></el-input>
          </el-form-item>
          <el-form-item label="图书作者">
            <el-input v-model="addBook.writer"></el-input>
          </el-form-item>
          <el-form-item label="图书出版社">
            <el-input v-model="addBook.publisher"></el-input>
          </el-form-item>
          <el-form-item label="图书出版时间">
            <el-input suffix-icon="el-icon-date" placeholder="YYYY-MM-DD" v-model="addBook.publishDate"></el-input>
          </el-form-item>
          <el-form-item label="学科类型">
            <el-input v-model="addBook.subject"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HostBookInit",
  data(){
    return{
      isEdit:false,
      addBook:{
        id:3,
        isbn:0,
        name:"",
        writer:"",
        publisher:"",
        publishDate:"",
        subject:"",
        stock:"",
      },
      tableDataBook:[],
      tableDataBookTimely:[]
    }
  },
  methods:{
    toEdit(){
      this.isEdit = true
    },
    quitEdit(row){
      this.isEdit = false
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/book/',row).then((res)=> {
        console.log(res)
      })
    },
    addBooks(){
      this.tableDataBookTimely.push(this.addBook)
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.post(this.ip + '/book/',this.addBook).then((res)=> {
        console.log(res)
      })

      this.tableDataBookTimely = undefined
      this.tableDataBookTimely = new Array()
      axios.get((this.ip + '/book/1/100')).then((response)=>{
        this.tableDataBook = response.data.pageInfo.list
        this.tableDataBookTimely = this.tableDataBook
      }).catch((error)=>{
        console.log(error)
      })
    },
  },

  mounted() {
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/book/1/100')).then((response)=>{
      console.log(response.data.pageInfo.list)
      this.tableDataBook = response.data.pageInfo.list
      this.tableDataBookTimely = this.tableDataBook
    }).catch((error)=>{
      console.log(error)
    })
  },

  // watch:{
  //   tableDataBook:{
  //     deep:true,
  //     handler(value){
  //       console.log("检测到变化",value)
  //     }
  //   }
  // }

}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.addButton{
  margin: 20px 0px;
}
.formBox{
  margin: 0px 200px;
}
.el-button--warning:focus, .el-button--warning:hover {
  background: #00d4d9;
  border-color: #00d4d9;
  color: #FFF;
}
.el-button--warning {
  color: #FFF;
  background-color: #00a4a8;
  border-color: #00a4a8;
}
.el-form-item {
  margin: 5px 0px;
}
</style>
